<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" th:href="@{/}+'js/jquery.mloading/jquery.mloading.css'" media="all">
<script th:src="@{/}+'js/jquery.mloading/jquery.mloading.js'"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-row">
                <form class="layui-form" lay-filter="myform" id="myform">
                	<input type="reset" id="btReset" class="layui-hide" >
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">选择试卷</label>
                            <div class="layui-input-inline">
                                <input type="text" name="paperName" id="paperName"  autocomplete="off" class="layui-input" select>
                                <input type="hidden" name="paperId" id="paperId">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-btn-group">
                                <button type="button" class="layui-btn layui-btn-primary" data-type="query"><i class="layui-icon">&#xe615;</i>查询</button>
                                <button type="button" class="layui-btn layui-btn-primary" data-type="resetBtn"><i class="layui-icon">&#xe669;</i>重置</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="row">
                <table class="layui-hide"  id="main-table" lay-filter="main-table"></table>
            </div>
        </div>
    </div>
</div>

<script th:inline="none"></script>
<script>
    layui.use(['table','form','element'], function(){
        var table = layui.table,
        $ = layui.$,
        form = layui.form;
        table.render({
            elem: '#main-table'
            ,height: (top.height-85)+'px'
            ,url: 'dateScore/rank2'
            ,title: '排名列表'
            ,page: true 
            ,toolbar: '#toolbar' 
            ,limit:20
            ,cols: [
                [ 
                {type: 'numbers'}
                ,{field: 'orgName', title: "参赛队",width:280}
                ,{field: 'rate',title: "合格率",width:120}
                ,{field: 'rank',title: "排名",width:120}
            ]
            ]
            ,done:function(){
             }
        });
        table.on('row(main-table)', function(obj){
        	clickLayTableRow(table,form,'main-table',obj);
        });
      	$("#paperName").on("click",function(){
      	    top.layer.open({
                id:"openwin",
                type: 2,
                title:'选择试卷',
                area:['1300px','750px'],
                content:  'rooter?url=ksxt/stat/paper-select',
                btn:['选择','关闭'],
                yes:function(index,layero){
                	var iframeWin = top[layero.find('iframe')[0]['name']];
                	let r = iframeWin.getId();
                	$("#paperId").val(r.id);
                	$("#paperName").val(r.name);
                	top.layer.close(index);
                }
            });
      	})
      	table.on('toolbar(main-table)', function(obj){
        	switch(obj.event){
            case 'excel':
            	$("#app").mLoading({text:"正在导出，请稍后"});
     			$("#hideForm").attr("action","dateScore/excelRank2").submit();
     			$("#app").mLoading("hide");
            	break;
        	}
        })
        var $ = layui.$, active = {
            query: function(){

                table.reload("main-table",{where:{name:$("#name").val()}})
            },
            resetBtn:function () {
                $("#btReset").click();
                
            }
        };
        $('.layui-form .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
    
</script>
<script type="text/html" id="toolbar">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="excel"><i class="layui-icon layui-icon-file"></i>导出</button>
    </div>
</script>
</body>
</html>